<template>
  <div class="websocket-status">
    <el-tooltip :content="tooltipContent" placement="bottom">
      <div class="status-indicator" :class="statusClass">
        <i :class="iconClass"></i>
        <span class="status-text">{{ statusText }}</span>
        <span v-if="showOnlineCount" class="online-count">({{ onlineCount }})</span>
      </div>
    </el-tooltip>
    
    <!-- 重连按钮 -->
    <el-button 
      v-if="showReconnectButton" 
      type="text" 
      size="mini" 
      @click="handleReconnect"
      :loading="isConnecting"
    >
      重连
    </el-button>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  name: 'WebSocketStatus',
  props: {
    // 是否显示在线人数
    showOnlineCount: {
      type: Boolean,
      default: true
    },
    // 是否显示重连按钮
    showReconnectButton: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    ...mapGetters('websocket', ['connectionInfo']),
    
    // 连接状态
    isConnected() {
      return this.connectionInfo.isConnected
    },
    
    isConnecting() {
      return this.connectionInfo.isConnecting
    },
    
    hasError() {
      return !!this.connectionInfo.error
    },
    
    reconnectAttempts() {
      return this.connectionInfo.reconnectAttempts
    },
    
    // 服务器状态
    serverStatus() {
      return this.$store.state.websocket.serverStatus
    },
    
    onlineCount() {
      return this.serverStatus.onlineCount || 0
    },
    
    // 状态样式类
    statusClass() {
      if (this.isConnecting) return 'connecting'
      if (this.isConnected) return 'connected'
      if (this.hasError) return 'error'
      return 'disconnected'
    },
    
    // 图标类
    iconClass() {
      if (this.isConnecting) return 'el-icon-loading'
      if (this.isConnected) return 'el-icon-success'
      if (this.hasError) return 'el-icon-error'
      return 'el-icon-warning'
    },
    
    // 状态文本
    statusText() {
      if (this.isConnecting) return '连接中'
      if (this.isConnected) return '实时连接'
      if (this.hasError) return '连接异常'
      return '未连接'
    },
    
    // 提示内容
    tooltipContent() {
      if (this.isConnecting) {
        return '正在建立WebSocket连接...'
      }
      if (this.isConnected) {
        return `WebSocket连接正常，实时接收数据更新`
      }
      if (this.hasError) {
        let content = `连接错误: ${this.connectionInfo.error}`
        if (this.reconnectAttempts > 0) {
          content += `\n重连尝试: ${this.reconnectAttempts}/5`
        }
        return content
      }
      return 'WebSocket未连接，点击重连按钮建立连接'
    }
  },
  methods: {
    ...mapActions('websocket', ['reconnectWebSocket']),
    
    // 处理重连
    handleReconnect() {
      this.reconnectWebSocket()
    }
  }
}
</script>

<style lang="scss" scoped>
.websocket-status {
  display: flex;
  align-items: center;
  gap: 8px;
  
  .status-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    transition: all 0.3s ease;
    
    &.connected {
      color: #67c23a;
      background-color: #f0f9ff;
      border: 1px solid #67c23a;
      
      .el-icon-success {
        animation: pulse 2s infinite;
      }
    }
    
    &.connecting {
      color: #409eff;
      background-color: #ecf5ff;
      border: 1px solid #409eff;
      
      .el-icon-loading {
        animation: rotate 1s linear infinite;
      }
    }
    
    &.error {
      color: #f56c6c;
      background-color: #fef0f0;
      border: 1px solid #f56c6c;
    }
    
    &.disconnected {
      color: #e6a23c;
      background-color: #fdf6ec;
      border: 1px solid #e6a23c;
    }
    
    .status-text {
      font-weight: 500;
    }
    
    .online-count {
      color: #909399;
      font-size: 11px;
    }
  }
}

@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
